<template>
    <div>
        <h2>库存台账</h2>
        <el-divider></el-divider>
        <el-form :inline="true" :model="sardate" class="demo-form-inline demo-form-inline-left">
            <el-form-item label="产品编号">
                <el-input v-model="sardate.productCode" placeholder="产品编号"></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="sardate.productName" placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item label="仓库">
                <el-select v-model="sardate.warehouseId" placeholder="仓库" clearable style="width:100%">
                    <el-option label="请选择" :value="0">请选择</el-option>
                    <el-option v-for="item in getWarehousBoxList" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品批次">
                <el-input v-model="sardate.productBatch" placeholder="产品批次"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetInventoryBookDtoPes" icon="el-icon-search">查询</el-button>
                <el-button type="primary" class="el-icon-refresh-right" @click="reseted">重置</el-button>
                <el-button type="success" @click="exportListToExcel(multipleSelection)">导出<i
                        class="el-icon-upload el-icon--right"></i></el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <template>
            <el-table :data="getinventorylist" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="productCode" label="产品编号">
                </el-table-column>
                <el-table-column prop="productName" label="产品名称">
                </el-table-column>
                <el-table-column prop="specs" label="产品规格">
                </el-table-column>
                <el-table-column prop="productBatch" label="产品批次">
                </el-table-column>
                <el-table-column prop="type" label="类型">
                </el-table-column>
                <el-table-column prop="name" label="仓库">
                </el-table-column>
                <el-table-column prop="number" label="数量">
                </el-table-column>
                <el-table-column prop="specs" label="单位">
                </el-table-column>
                <el-table-column prop="originalStorage" label="原库位">
                    <template slot-scope="sc">
                        <span v-if="sc.row.originalStorage == 1">默认库位</span>
                        <span v-else>报损库位</span>
                    </template>
                </el-table-column>
                <el-table-column prop="targetWarehouse" label="目标仓库">
                    <template slot-scope="sc">
                        <span v-if="sc.row.targetWarehouse == 1">1号仓库</span>
                        <span v-else>12号仓库</span>
                    </template>
                </el-table-column>
                <el-table-column prop="targetLocation" label="目标库位">
                    <template slot-scope="sc">
                        <span v-if="sc.row.targetLocation == 1">1号仓库</span>
                        <span v-else>12号仓库</span>
                    </template>
                </el-table-column>
                <el-table-column prop="inventoryBookDate" label="日期">
                    <template slot-scope="sc">
                        {{ sc.row.inventoryBookDate.substr(0, 10) }}
                    </template>
                </el-table-column>
            </el-table>
        </template>

    </div>
</template>
<script>
import { GetInventoryBookDtoPes } from "@/api/StatementMange/InventoryBookMange";
import { GetWarehousBox } from "@/api/BasicsDatumServer/locationServers";
import XLSX from 'xlsx';
export default {
    data() {
        return {
            sardate: {
                productCode: "",
                productName: "",
                warehouseId: 0,
                productBatch: "",
            },
            page: {
                page: 1,
                size: 5,
                totalCount: 0,
                pageCount: 0,
            },
            getWarehousBoxList: [],
            getinventorylist: [],
            multipleSelection: [],
        }
    },
    methods: {
        //批量删除获取列表
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection);
        },
        //导出
        exportListToExcel(dataList) {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    message: '请选择要导出的数据',
                    type: 'warning'
                });
                return;
            }
            // 过滤需要导出的字段
            const filteredData = dataList.map(item => {
                return {
                    编号: item.id,
                    产品编号: item.productCode,
                    产品名称: item.productName,
                    产品规格: item.specs,
                    产品批次: item.productBatch,
                    类型: item.type,
                    仓库: item.name,
                    数量: item.number,
                    单位: item.unit,
                    原库位: item.originalStorage,
                    目标仓库: item.targetWarehouse,
                    目标库位: item.targetLocation,
                    日期: item.inventoryBookDate.substr(0, 10),
                };
            });
            const worksheet = XLSX.utils.json_to_sheet(filteredData);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            // 导出Excel文件
            XLSX.writeFile(workbook, '库存台账.xlsx');

        },
        //重置
        reseted() {
            this.sardate = {
                productCode: "",
                productName: "",
                warehouseId: 0,
                productBatch: "",
            }
            this.GetInventoryBookDtoPes();
        },
        //下拉框
        getWarehousBoxmethod() {
            GetWarehousBox().then((res) => {
                //console.log(res);
                this.getWarehousBoxList = res.data;
                //console.log(this.getWarehousBoxList);
            });
        },
        GetInventoryBookDtoPes() {
            var myparams = {
                productCode: this.sardate.productCode,
                productName: this.sardate.productName,
                warehouseId: this.sardate.warehouseId,
                productBatch: this.sardate.productBatch,
                page: this.page.page,
                size: this.page.size,
            };
            GetInventoryBookDtoPes(myparams).then((res) => {
                console.log(res);
                this.getinventorylist = res.data.data;
                this.page.totalCount = res.data.totalCount;
                this.page.pageCount = res.data.pageCount;
            });
        }
    },
    mounted() {
        this.getWarehousBoxmethod();
        this.GetInventoryBookDtoPes();
    },
}
</script>
<style>
.demo-form-inline-left {
    text-align: left;
}

.demo-form-inline-right {
    text-align: right;
}
</style>